<template>
  <div class="notification-container">
    <transition-group name="notification-fade">
      <div v-for="notification in notifications" :key="notification.id" class="notification-item" :class="{ 'notification-success': notification.type === 'success', 'notification-error': notification.type === 'error' }">
        <div class="notification-content">
          <i v-if="notification.type === 'success'" class="el-icon-check" />
          <i v-if="notification.type === 'error'" class="el-icon-error" />
          <span class="notification-message">{{ notification.message }}</span>
        </div>
      </div>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      notifications: []
    }
  },
  methods: {
    openNotification(type, message, duration = 3000) {
      const id = Date.now()
      console.log('this.notifications', this.notifications)
      this.notifications.push({ id, type, message })
      setTimeout(() => {
        this.closeNotification(id)
      }, duration)
    },
    closeNotification(id) {
      this.notifications = this.notifications.filter(notification => notification.id !== id)
    }
  }
}
</script>
<style scoped>
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}
.notification-item {
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.notification-item.notification-fade-enter-active,
.notification-item.notification-fade-leave-active {
  opacity: 1;
}
.notification-item.notification-fade-enter,
.notification-item.notification-fade-leave-to {
  opacity: 0;
}
.notification-success {
  color: #67c23a;
}
.notification-error {
  color: #f56c6c;
}
</style>
